<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="/js/drugUploader/fileuploader.css" rel="stylesheet" type="text/css">
        <link href="/js/jquery/ui/css/demos.css" rel="stylesheet" type="text/css">
        <link href="/js/jquery/ui/css/smoothness/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css">
        <script src="/js/drugUploader/fileuploader.js" type="text/javascript">
        </script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" />        
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"/>
        <title>Insert title here</title>
        <style type="text/css">
            .file-uploader {
                width: 300px;
            }
            
            body {
                font-size: 62.5%;
            }
            
            label, input {
                display: block;
            }
            
            input.text {
                margin-bottom: 12px;
                width: 95%;
                padding: .4em;
            }
            
            fieldset {
                padding: 0;
                border: 0;
                margin-top: 25px;
            }
            
            h1 {
                font-size: 1.2em;
                margin: .6em 0;
            }
            
            div#users-contain {
                width: 350px;
                margin: 20px 0;
            }
            
            div#users-contain table {
                margin: 1em 0;
                border-collapse: collapse;
                width: 100%;
            }
            
            div#users-contain table td, div#users-contain table th {
                border: 1px solid #eee;
                padding: .6em 10px;
                text-align: left;
            }
            
            .ui-dialog .ui-state-error {
                padding: .3em;
            }
            
            .validateTips {
                border: 1px solid transparent;
                padding: 0.3em;
            }
        </style>
        <script type="text/javascript">
            $(function(){
                function uploaderMy(){
                    var uploader = new qq.FileUploader({
                        // pass the dom node (ex. $(selector)[0] for jQuery users)
                        element: document.getElementById('file-uploader'),
                        // path to server-side upload script
                        action: '/MyLessonWeb/TestByteArrServlet',
                        sizeLimit: 10485760,
                        onSubmit: function(id, fileName){
                        },
                        allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'exe'],
                        onComplete: function(id, fileName, responseJSON){
                            //alert(responseJSON.filePath);
                            //var intw = document.getElementById('qq-upload-list');
                            //intw.innerHTML = '<span class="qq-upload-failed-text"> completed </span>'
                        },
                    });
                }
                
                
                // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
                $("#dialog").dialog("destroy");
                
                var name = $("#name"), 
					email = $("#email"), 
					password = $("#password"), 
					allFields = $([]).add(name).add(email).add(password), 
					tips = $(".validateTips");
                
                function updateTips(t){
                    tips.text(t).addClass('ui-state-highlight');
                    setTimeout(function(){
                        tips.removeClass('ui-state-highlight', 1500);
                    }, 500);
                }
                
                function checkLength(o, n, min, max){
                
                    if (o.val().length > max || o.val().length < min) {
                        o.addClass('ui-state-error');
                        updateTips("Length of " + n + " must be between " + min + " and " + max + ".");
                        return false;
                    }
                    else {
                        return true;
                    }
                    
                }
                
                function checkRegexp(o, regexp, n){
                
                    if (!(regexp.test(o.val()))) {
                        o.addClass('ui-state-error');
                        updateTips(n);
                        return false;
                    }
                    else {
                        return true;
                    }
                    
                }
                uploaderMy();
				
                $("#dialog-form").dialog({
                    autoOpen: false,
                    height: 500,
                    width: 400,
                    modal: true,
                    buttons: {
                        'Create an account': function(){
                            var bValid = true;
                            allFields.removeClass('ui-state-error');
                            
                            bValid = bValid && checkLength(name, "username", 3, 16);
                            bValid = bValid && checkLength(email, "email", 6, 80);
                            bValid = bValid && checkLength(password, "password", 5, 16);
                            
                            bValid = bValid && checkRegexp(name, /^[a-z]([0-9a-z_])+$/i, "Username may consist of a-z, 0-9, underscores, begin with a letter.");
                            // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                            bValid = bValid && checkRegexp(email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com");
                            bValid = bValid && checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");
                            
                            if (bValid) {
                                $('#users tbody').append('<tr>' +
                                '<td>' +
                                name.val() +
                                '</td>' +
                                '<td>' +
                                email.val() +
                                '</td>' +
                                '<td>' +
                                password.val() +
                                '</td>' +
                                '</tr>');
                                $(this).dialog('close');
                            }
                        },
                        Cancel: function(){
                            $(this).dialog('close');							
                        }
                    },
                    close: function(){
                        allFields.val('').removeClass('ui-state-error');
						$('#file-uploader div.qq-uploader ul.qq-upload-list').html("");
                    }
                });
                
                
                
                $('#create-user').button().click(function(){
                    $('#dialog-form').dialog('open');
                });
                
            });
            
            
            
            
            //form.enctype = 'multipart/form-data';
            
            //window.onload = uploaderMy;
        </script>
    </head>
    <body>
<div id="dialog-form" title="Create new user">
	<p class="validateTips">All form fields are required.</p>

	<form>
	<fieldset>
		<label for="YourName">Your Name</label>
		<input type="text" name="YourName" id="YourName" class="text ui-widget-content ui-corner-all" />
		<label for="CompanyName">Company Name:</label>
		<input type="text" name="CompanyName" id="CompanyName" class="text ui-widget-content ui-corner-all" />
		
		<label for="CompanyName">Company Name:</label>
		<input type="text" name="CompanyName" id="CompanyName" class="text ui-widget-content ui-corner-all" />
		
		
		<label for="email">Email</label>
		<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
		<label for="password">Password</label>
		<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
	<br>
	<div id="file-uploader">
            <noscript>
                <p>
                    Please enable JavaScript to use file uploader.
                </p>
                <!-- or put a simple form for upload here -->
            </noscript>
    </div>
</div>


<div id="users-contain" class="ui-widget">

		<h1>Existing Users:</h1>


	<table id="users" class="ui-widget ui-widget-content">
		<thead>
			<tr class="ui-widget-header ">
				<th>Name</th>
				<th>Email</th>
				<th>Password</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>John Doe</td>
				<td>john.doe@example.com</td>
				<td>johndoe1</td>
			</tr>
		</tbody>
	</table>
</div>
<button id="create-user">Create new user</button>


		
        
    </body>
</html>